<script setup lang="ts">
import { ZtEchart } from "@ztstory/datav-core";
import { createGradientColors, createLineOpts, createLineSeriesItem } from "@ztstory/datav-core/echarts-opts";
import { DateUtils } from "@ztstory/datav-core/src/utils/date.util";
import { computed } from "vue";

const opts = computed(()=>{

    const categorys: string[] = [];

    for (let i = 0; i < 7; i++) {
        categorys.push(DateUtils.string2string(DateUtils.date2String(DateUtils.subtract(new Date(), i, "day"), "YYYY-MM-DD"), "YYYY-MM-DD", "M.DD"));
    }

    const barOpts = createLineOpts([createGradientColors(["#E6AE28", "#FF8A00"])], categorys, 380);

    barOpts.series = [createLineSeriesItem([412, 435, 408, 427, 443, 419, 431])];

    return barOpts
})
</script>

<template>
    <div class="chart_content pd_20">
        <zt-echart ref="echart" :opts="opts"></zt-echart>
    </div>
</template>

<style scoped lang="less">
.chart_content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
</style>